<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Bilibili</title>
    <script src="ind_cpp.js"></script>
    <script src="components.js"></script> <!-- 加载组件定义 -->
    <style>
        .component {
            position: absolute;
            border: 1px solid black;
        }

        .text {
            white-space: nowrap;
            overflow: hidden;
            font-size: 16px;
            display: flex;
            align-items: center;
            /* 垂直居中 */

        }

        img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <script>
        let moduleInstance = null;
        const elementCache = [];  // 使用数组来缓存组件元素

        function initializeComponents(screenWidth) {
            if (!moduleInstance) {
                createModule().then(Module => {
                    moduleInstance = Module;
                    const componentNames = moduleInstance.getInitialComponents();
                    renderComponents(componentNames);
                });
            } else {
                const componentNames = moduleInstance.getInitialComponents();
                renderComponents(componentNames);
            }
        }

        function renderComponents(componentNames) {
            // 清空现有组件
            elementCache.length = 0; // 清空缓存数组
            for (const key in imageurls) {
                let div = document.createElement('div');
                div.id = key;
                div.className = 'component';
                const imageurl = imageurls[key];
                const img = new Image();
                img.src = imageurl;
                div.appendChild(img);
                document.body.appendChild(div);
            }
            for (const key in texts) {
                let div = document.createElement('div');
                div.id = key;
                div.className = 'component text';
                const text = texts[key];
                div.textContent = text;
                document.body.appendChild(div);
            }
            for (const key in white_texts) {
                let div = document.createElement('div');
                div.id = key;
                div.className = 'component text';
                const text = white_texts[key];
                div.textContent = text;
                div.style.color = "white";
                document.body.appendChild(div);
            }
            for (let i = 0; i < componentNames.size(); i++) {
                const name = componentNames.get(i);
                const div2 = document.getElementById(name);
                if (!div2) {
                    let div = document.createElement('div');
                    div.id = name;
                    div.className = 'component text';
                    document.body.appendChild(div);
                    elementCache.push(div);
                }
                else {
                    elementCache.push(div2);
                }
            }
            updateComponents(window.innerWidth);
        }

        function updateComponents(screenWidth) {
            const components = moduleInstance.getComponents(screenWidth);

            for (let i = 0; i < components.size(); i++) {
                const component = components.get(i);
                const div = elementCache[i];  // 从缓存数组获取组件元素
                div.style.left = component.x + 'px';
                div.style.top = component.y + 'px';
                div.style.width = component.w + 'px';
                div.style.height = component.h + 'px';
                div.style.visibility = component.v ? 'visible' : 'hidden';
            }
        }

        // 获取初始屏幕宽度并初始化组件
        initializeComponents(window.innerWidth);

        // 添加事件监听器，在屏幕宽度变化时实时更新组件
        window.addEventListener('resize', () => {
            updateComponents(window.innerWidth);
        });
    </script>
</body>

</html>